<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            @submit="handleSubmit"
          >
            <a-form-item label="辅料代码">
              <a-input
                allow-clear
                placeholder="请输入辅料编号"
                v-model="accPriceCode"
              ></a-input>
            </a-form-item>
            <a-form-item label="物料名称">
              <a-input
                allow-clear
                placeholder="请输入物料名称"
                v-model="accName"
              ></a-input>
            </a-form-item>
            <a-form-item label="辅料大类">
              <a-select
                style="width: 180px"
                placeholder="请选择辅料大类"
                v-model="classifyBig"
                @focus="getDictChildList('CLASSIFY_BIG', 'classifyBigList')"
                allow-clear
              >
                <a-select-option
                  :value="item.code"
                  v-for="(item, index) in classifyBigList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="辅料中类">
              <a-select
                style="width: 180px"
                placeholder="请选择辅料中类"
                v-model="classifySmall"
                @focus="getDictChildList('CLASSIFY_SMALL', 'classifySmallList')"
                allow-clear
              >
                <a-select-option
                  :value="item.code"
                  v-for="(item, index) in classifySmallList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
    <a-card>
      <a-table
        bordered
        :loading="loading"
        :pagination="pagination"
        :columns="columns"
        :scroll="{x: 1500,y:500}"
        :data-source="dataSource"
        @change="handleTableChange"
      >
      <!-- <template v-for="(col, index) in headerCol" :slot="col.name" slot-scope="text">
        <div :key="index">
          {{text.headerTitle}}
        </div>
      </template> -->
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { getPriceList, getDictChildList } from '@api/material/index'

const columns = [
  {
    title: '辅料代码',
    dataIndex: 'accPriceCode',
    width:180,
      fixed: 'left'
  },
  {
    title: '辅料名称',
    width:150,
    dataIndex: 'name',
  
  },
  
  {
    title: '辅料编号',
    dataIndex: 'accCode',
    width:180,
  },
  
  {
    title: '辅料大类',
    width:100,
    dataIndex: 'classifyBigValue'
  },
  {
    title: '辅料中类',
    width:100,
    dataIndex: 'classifySmallValue'
  },
  {
    title: '特殊属性',
    width:120,
    dataIndex: 'classifyMinimumValue'
  },
  {
    title: '特殊后缀',
    width:100,
    dataIndex: 'specialSuffixValue'
  },
  {
    title: '辅料规格',
    width:90,
    dataIndex: 'specs'
  },
  {
    title: '辅料颜色编号',
    width:140,
    dataIndex: 'color'
  },
  {
    title: '辅料颜色',
    width:100,
    dataIndex: 'colorCode'
  },
  {
    title: '供应类型',
    width:100,
    dataIndex: 'supplyTypeValue'
  },
  {
    title: '采购单位',
    width:100,
    dataIndex: 'purchasingUnitValue'
  },
  {
    title: '损耗率',
    width:90,
    dataIndex: 'wasteRate'
  },
  {
    title: '默认供应商',
    width:120,
    dataIndex: 'supply.name'
  },
  {
    title: '供应商编号',
    width:120,
    dataIndex: 'supply.code'
  },
  {
    title: '大货价',
    width:90,
    dataIndex: 'supply.purchaseTaxTratePrice'
  },
  {
    title: '第二供应商',
    width:120,
    dataIndex: 'supplyInfoList[0].name'
  },
  {
    title: '供应商编号',
    width:120,
    dataIndex: 'supplyInfoList[0].code'
  },
  {
    title: '大货价',
    width:90,
    dataIndex: 'supplyInfoList[0].purchaseTaxTratePrice'
  },
  {
    title: '第三供应商',
    width:120,
    dataIndex: 'supplyInfoList[1].name'
  },
  {
    title: '供应商编号',
    width:120,
    dataIndex: 'supplyInfoList[1].code'
  },
  {
    title: '大货价',
    width:90,
    dataIndex: 'supplyInfoList[1].purchaseTaxTratePrice'
  },
  {
    title: '厂家色号',
    width:100,
    dataIndex: 'manufactorColorCode'
  },
  {
    title: '产品年份',
    width:100,
    dataIndex: 'productYearValue'
  },
  {
    title: '对应上货季',
    width:120,
    dataIndex: 'putGoodsSeasonValue'
  },
  {
    title: '拉链号型',
    width:100,
    dataIndex: 'zipperModelValue'
  },
  {
    title: '拉链功能',
    width:100,
    dataIndex: 'zipperFunctionValue'
  },
  {
    title: '拉头',
    width:100,
    dataIndex: 'zipperHeadValue'
  },
  {
    title: '拉链牙齿',
    width:100,
    dataIndex: 'zipperToothValue'
  },
  {
    title: '拉链布带',
    width:100,
    dataIndex: 'zipperClothBagValue'
  },
  {
    title: '产品材质/成份',
    width:150,
    dataIndex: 'textureComponent'
  },
  {
    title: '克重',
    width:90,
    dataIndex: 'gramWeight'
  },
  {
    title: '缩率',
    width:90,
    dataIndex: 'minification'
  },
  {
    title: '门幅/段长',
    width:150,
    dataIndex: 'widthSegmentLength'
  },
  {
    title: '拉链特殊说明',
    width:150,
    dataIndex: 'zipperSpecialExplainValue'
  },
  {
    title: '凑卷数量',
    width:100,
    dataIndex: 'pieceNumber'
  },
  // {
  //   title: '库存数量',
  //   dataIndex: 'zipperFunctionValue1'
  // },
  {
    title: '大货周期',
    width:100,
    dataIndex: 'bigGoodsCycle'
  },
  {
    title: '快反周期',
    width:100,
    dataIndex: 'quickBackCycle'
  },
  {
    title: '粘衬温度',
    width:100,
    dataIndex: 'stickLiningTemperature'
  },
  {
    title: '粘衬时间',
    width:100,
    dataIndex: 'stickLiningTime'
  },
  {
    title: '粘衬压力',
    width:100,
    dataIndex: 'stickLiningPressure'
  },
  {
    title: '产地',
    width:90,
    dataIndex: 'placeOfOrigin'
  },
  {
    title: '图案编号',
    width:100,
    dataIndex: 'patternCode'
  },
  {
    title: '产品特性说明',
    width:150,
    dataIndex: 'specialExplain'
  },
  {
    title: '原辅料编号',
    width:120,
    // dataIndex: 'zipperFunctionValue2'
  },
  {
    title: '创建人',
    width:90,
    dataIndex: 'creater'
  },
  {
    title: '创建时间',
    width:200,
    dataIndex: 'createDate'
  }
]
const supply = [
  {
    title: '默认供应商',
    width:100,
    dataIndex: 'createDate'
  },
  {
    title: '供应商色号',
    width:100,
    dataIndex: 'createDate'
  },
  {
    title: '大货价',
    width:100,
    dataIndex: 'createDate'
  },
  {
    title: '默认供应商',
    width:100,
    dataIndex: 'createDate'
  },
  {
    title: '供应商色号',
    width:100,
    dataIndex: 'createDate'
  },
  {
    title: '大货价',
    width:100,
    dataIndex: 'createDate'
  }
  
]
export default {
  components: {},
  data() {
    return {
      supply,
      urlKey: 'basemgt-material/',
      columns,
      bag: {},
      form: this.$form.createForm(this),
      showAdd: false,
      account: '',
      groupName: '',
      loading: false,
      dataSource: [],
      auth: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      },
      classifyBigList: [],
      classifySmallList: [],
      classifyBig: undefined,
      classifySmall: undefined,
      accPriceCode: '',
      accName: ''
    }
  },
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },
  mounted() {
    this.loadData()
  },

  methods: {
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },
    handleSubmit(e) {
      e.preventDefault()
      this.getList(1)
    },

    loadData() {
      this.getList()
    },
    async getDictChildList(name, list) {
      const params = {
        name: name
      }
      try {
        const res = await getDictChildList(params)
        if (res.code == 200) {
          this[list] = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取数据字典失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取数据字典失败！')
      }
    },

    async getList(key) {
      this.loading = true
      const params = {
        current: this.pagination.current,
        size: this.pagination.pageSize,
        accPriceCode: this.accPriceCode,
        accName: this.accName,
      }
      if (key) {
        params.current = 1
      }
      if(this.classifyBig){
        params.classifyBig = this.classifyBig
      }
      if(this.classifySmall){
        params.classifySmall = this.classifySmall
      }
      try {
        const res = await getPriceList(params)
        if (res.code == 200) {
          this.dataSource = res.data.records
          this.pagination.total = res.data.total
          this.dataSource.map((item)=>{
            item.supplyInfoList.map((subitem)=>{
              if(subitem.defaultFlag == 1){
                const obj = {
                  name:subitem.name,
                  code:subitem.code,
                  purchaseTaxTratePrice:subitem.purchaseTaxTratePrice
                }
                item.supply =obj
                item.supplyInfoList = item.supplyInfoList.filter((item) => item.defaultFlag != 1)
              }
            })
          })
        } else {
          if (res.msg) {
            this.$message.warning(res.msg)
          } else {
            this.$message.warning('获取列表失败！')
          }
        }
      } catch (error) {
        this.$message.warning('获取列表失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.background {
  background: transparent;
}

.mr-10 {
  margin-left: 10px;
}
</style>